<style lang="less">
	.content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.box_video {
		width: 49.9%;
		height: 560rpx;
		// box-shadow: 0 0 2px 2px #000;
		position: relative;
		margin: 0 0 5rpx;
		&>image {
			width:100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			filter: grayscale(50%);
		}
		.info{
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 0 15rpx;
			background: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));
			.info_name{
				font-size: 28rpx;
				line-height: 40rpx;
				font-weight: bold;
				letter-spacing: 1px;
				color: #fff;
				text-shadow: 0 0 1rpx 1rpx #F2F2F2 ;
			}
			.info_num{
				display: flex;
				flex-wrap: wrap;
				margin: 15rpx 0;
			}
			.num_left{
				font-size: 20rpx;
				color: #fff;
				&>text{
					margin: 0 0 0 5rpx;
				}
			}
		}
	}
</style>
<template>
	<view class="content">
		<view class="" :style="'height:' + statusBarHeight +'px'" ></view>
		<view class="box_video" v-for="item in list" :key='item.id' @click="navDetail(item.url)">
			<image :src="JSON.parse(item.miniimg)[0].src" mode=""></image>
			<view class="info">
				<view class="info_name">
					{{item.topic}}
				</view>
				<view class="info_num flex_r_between">
					<view class="num_left flex_v_venter">
						<i class='iconfont icon-seenum'></i>
						<text>{{item.viewNum}}</text>
					</view>
					<view class="num_left flex_v_venter">
						<i class='iconfont icon-dianzan'></i>
						<text>{{item.praiseNum}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		created() {
			this.getList()
		},
		methods:{
			navDetail(url){
				console.log(url)
				uni.navigateTo({
					url:'/pages/index/video-detail?url='+encodeURIComponent(url)
				})
			},
			getList() {
				this.$ajax('/news/videoList', {
					type: 20,
					page: 1,
					size: 10,
				}, 'get').then(res => {
					console.log(res)
					this.list = res.data.obj
				})
			},
		}
	}
</script>
